  <!-- Main content -->
  <div class="main-content">

    <!-- Top navbar -->
    <nav class="navbar navbar-top navbar-expand-md navbar-dark" id="navbar-main">
      <div class="container-fluid">
        <!-- Brand -->
        <a class="h4 mb-0 text-white text-uppercase d-none d-lg-inline-block" href="./index.html">仪表板</a>
        <!-- Form -->
        <form class="navbar-search navbar-search-dark form-inline mr-3 d-none d-md-flex ml-lg-auto">
          <div class="form-group mb-0">
            <div class="input-group input-group-alternative">
              <div class="input-group-prepend">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
              </div>
              <input class="form-control" placeholder="Search" type="text">
            </div>
          </div>
        </form>
        <!-- User -->
        {% include 'includes/user-dropdown.html' %}
        
      </div>
    </nav>

    <!-- Header -->
    {% include 'includes/top-stats.html' %}

    <!-- Page content -->
    <div class="container-fluid mt--7">
      <div class="row">
        <div class="col-xl-8 mb-5 mb-xl-0">
          <div class="card bg-gradient-default shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-light ls-1 mb-1">Overview</h6>
                  <h2 class="text-white mb-0">Sales value</h2>
                </div>
                <div class="col">
                  <ul class="nav nav-pills justify-content-end">
                    <li class="nav-item mr-2 mr-md-0" data-toggle="chart" data-target="#chart-sales" data-update='{"data":{"datasets":[{"data":[0, 20, 10, 30, 15, 40, 20, 60, 60]}]}}' data-prefix="$" data-suffix="k">
                      <a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
                        <span class="d-none d-md-block">Month</span>
                        <span class="d-md-none">M</span>
                      </a>
                    </li>
                    <li class="nav-item" data-toggle="chart" data-target="#chart-sales" data-update='{"data":{"datasets":[{"data":[0, 20, 5, 25, 10, 30, 15, 40, 40]}]}}' data-prefix="$" data-suffix="k">
                      <a href="#" class="nav-link py-2 px-3" data-toggle="tab">
                        <span class="d-none d-md-block">Week</span>
                        <span class="d-md-none">W</span>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="chart">
                <!-- Chart wrapper -->
                <canvas id="chart-sales" class="chart-canvas"></canvas>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header bg-transparent">
              <div class="row align-items-center">
                <div class="col">
                  <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
                  <h2 class="mb-0">Total orders</h2>
                </div>
              </div>
            </div>
            <div class="card-body">
              <!-- Chart -->
              <div class="chart">
                <canvas id="chart-orders" class="chart-canvas"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-xl-8  mb-5 mb-xl-0">
          <div class="card shadow">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  <h3 class="mb-0">Page visits</h3>
                </div>
                <div class="col text-right">
                  <a href="#!" class="btn btn-sm btn-primary">See all</a>
                </div>
              </div>
            </div>
              <div class="pre-scrollable" style="height: 280px; margin-top: -22px;">
                  <div class="table-responsive">{{ the_res|safe }}</div></div>
{#            <div class="table-responsive">#}
{#              <!-- Projects table -->#}
{#              <table class="table align-items-center table-flush">#}
{#                <thead class="thead-light">#}
{#                  <tr>#}
{#                    <th scope="col">Page name</th>#}
{#                    <th scope="col">Visitors</th>#}
{#                    <th scope="col">Unique users</th>#}
{#                    <th scope="col">Bounce rate</th>#}
{#                  </tr>#}
{#                </thead>#}
{#                <tbody>#}
{#                  <tr>#}
{#                    <th scope="row">#}
{#                      /argon/#}
{#                    </th>#}
{#                    <td>#}
{#                      4,569#}
{#                    </td>#}
{#                    <td>#}
{#                      340#}
{#                    </td>#}
{#                    <td>#}
{#                      <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%#}
{#                    </td>#}
{#                  </tr>#}
{#                  <tr>#}
{#                    <th scope="row">#}
{#                      /argon/index.html#}
{#                    </th>#}
{#                    <td>#}
{#                      3,985#}
{#                    </td>#}
{#                    <td>#}
{#                      319#}
{#                    </td>#}
{#                    <td>#}
{#                      <i class="fas fa-arrow-down text-warning mr-3"></i> 46,53%#}
{#                    </td>#}
{#                  </tr>#}
{#                  <tr>#}
{#                    <th scope="row">#}
{#                      /argon/charts.html#}
{#                    </th>#}
{#                    <td>#}
{#                      3,513#}
{#                    </td>#}
{#                    <td>#}
{#                      294#}
{#                    </td>#}
{#                    <td>#}
{#                      <i class="fas fa-arrow-down text-warning mr-3"></i> 36,49%#}
{#                    </td>#}
{#                  </tr>#}
{#                  <tr>#}
{#                    <th scope="row">#}
{#                      /argon/tables.html#}
{#                    </th>#}
{#                    <td>#}
{#                      2,050#}
{#                    </td>#}
{#                    <td>#}
{#                      147#}
{#                    </td>#}
{#                    <td>#}
{#                      <i class="fas fa-arrow-up text-success mr-3"></i> 50,87%#}
{#                    </td>#}
{#                  </tr>#}
{#                  <tr>#}
{#                    <th scope="row">#}
{#                      /argon/profile.html#}
{#                    </th>#}
{#                    <td>#}
{#                      1,795#}
{#                    </td>#}
{#                    <td>#}
{#                      190#}
{#                    </td>#}
{#                    <td>#}
{#                      <i class="fas fa-arrow-down text-danger mr-3"></i> 46,53%#}
{#                    </td>#}
{#                  </tr>#}
{#                </tbody>#}
{#              </table>#}
{#            </div>#}
          </div>
        </div>
        <div class="col-xl-4">
          <div class="card shadow">
            <div class="card-header border-0">
              <div class="row align-items-center">
                <div class="col">
                  <h3 class="mb-0">Social traffic</h3>
                </div>
                <div class="col text-right">
                  <a href="#!" class="btn btn-sm btn-primary">See all</a>
                </div>
              </div>
            </div>
            <div class="table-responsive">
              <!-- Projects table -->
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <th scope="col">Referral</th>
                    <th scope="col">Visitors</th>
                    <th scope="col"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                      1,480
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="mr-2">60%</span>
                        <div>
                          <div class="progress">
                            <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Facebook
                    </th>
                    <td>
                      5,480
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="mr-2">70%</span>
                        <div>
                          <div class="progress">
                            <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Google
                    </th>
                    <td>
                      4,807
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="mr-2">80%</span>
                        <div>
                          <div class="progress">
                            <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      Instagram
                    </th>
                    <td>
                      3,678
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="mr-2">75%</span>
                        <div>
                          <div class="progress">
                            <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th scope="row">
                      twitter
                    </th>
                    <td>
                      2,645
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="mr-2">30%</span>
                        <div>
                          <div class="progress">
                            <div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;"></div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {% include 'includes/footer.html' %}

    </div>
  </div>

